<template>
	<view>
		<view class="teacher-top">
			<view class="top-img">
				<img :src="userNameInfo.schoolLogo" alt="" style="width: 100%; height: 100%;  border-radius: 16rpx;">
			</view>
			<view class="top-content">
				<view class="tc-name">{{userNameInfo.name}}</view>
				<view class="address"> {{userNameInfo.address}}</view>
			</view>
			<view @click="locationNav" class="top-imgtwo">
				<img src="@/static/index/car.png" alt="" style="width: 100%; height: 100%;  border-radius: 50%;">
			</view>
			<view class="top-imgtwo" @click="telShowBtn">
				<img src="@/static/index/tel.png" alt="" style="width: 100%; height: 100%;  border-radius: 50%;">
			</view>
		</view>
		<view class="teacher-info">
			<view class="ti-title">授课老师</view>
			<view class="" v-if="!teacherList.length == 0">
				<view @click="teacherNav(item)" class="" v-for="(item,index) in teacherList" :key="index">
					<view class="ti-content">
						<view class="content-img">
							<img :src="item.avatar" alt="" style="width: 100%; height: 100%;  border-radius: 50%;">
						</view>
						<view class="content-right">
							<view class="cr-name">{{item.nickName}}</view>
							<view class="cr-age">教龄：{{item.teaching	}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-teacher" v-else>
				暂无老师信息~
			</view>
		</view>
<telPage></telPage>
	</view>
</template>


<script>
	import {
		teacherTeam
	} from '@/utils/api.js'
	import telPage from '@/components/telPage.vue';
	export default {
		components: {
		
			telPage,
		
		},
		data() {
			return {
				teacherList: [],
				userNameInfo: uni.getStorageSync('userNameInfo')
			}
		},
		onLoad() {
			this.teacherTeam()
		},
		methods: {
			locationNav(){
				uni.openLocation({
    latitude: 39.90960456049752, // 目的地的纬度
    longitude: 116.3972282409668, // 目的地的经度
    name: '天安门广场', // 位置名称
    address: '北京市东城区东长安街' // 详细地址
});
			},
			telShowBtn() {
				uni.$emit("telShow", true)
			},
			teacherNav(e){
				uni.navigateTo({
					url:`/pages/index/teacherInfo/teacherInfo?id=${e.userId}`
				})
			},
			async teacherTeam() {
				const res = await teacherTeam()
				this.teacherList = res.data
			}
		}
	}
</script>
<style>
	page {
		background-color: #efefef;
	}
</style>

<style scoped lang="scss">
	.teacher-top {
		width: 100%;
		height: 200rpx;
		background-color: #ffffff;
		display: flex;
	}

	.top-img {
		width: 150rpx;
		height: 150rpx;
		margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.top-content {
		margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.tc-name {
		font-weight: bold;
	}

	.address {
		width: 290rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		color: #a1a1a1;
		font-size: 24rpx;
		margin-top: 20rpx;

	}

	.top-imgtwo {
		width: 50rpx;
		height: 50rpx;
		margin-left: 50rpx;
		margin-top: 100rpx;
	}

	.teacher-info {
		width: 100%;
		height: calc(100vh - 200rpx);
		margin-top: 20rpx;
		background-color: #ffffff;
	}

	.ti-title {
		font-size: 38rpx;
		padding-top: 30rpx;
		margin-left: 30rpx;
	}

	.ti-content {
		display: flex;
		margin-left: 40rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}

	.content-img {
		width: 100rpx;
		height: 100rpx;
	}

	.content-right {
		margin-left: 40rpx;

	}

	.cr-name {
		font-weight: bold;
		margin-top: 10rpx;
		letter-spacing: 2rpx;
	}

	.cr-age {
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	.no-teacher{
		text-align: center;
		margin-top: 130rpx;
		color: #a1a1a1;
	}
</style>